<template>
  <div class="box">
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" @click="goback" />
      </template>
    </van-search>
    <div>
      <div class="hea">
        <span>最近搜索</span>
      </div>
      <div class="footer">
        <span class="small" v-for="i in zuijinarr" :key="i.id">{{ i }}</span>
      </div>
    </div>
    <div>
      <div class="hea">
        <span>热门搜索</span>
      </div>
      <div class="footer">
        <span
          class="small"
          v-for="i in list"
          :key="i.wordid"
          @click="gosearch(i.keyword)"
          >{{ i.keyword }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { gethot } from "@/api/search";
export default {
  data() {
    return {
      value: "",
      list: [],
      zuijinarr: ["手机", "嘻嘻嘻"],
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    // inputval(n) {
    //   this.inputcontent = n.target.value;
    // },
    gosearch(keyword) {
      this.$router.push("/Searchlist/" + keyword);
    },
  },
  created() {
    // 最近
    // let obj = {};
    // let arr = this.$store.state.laseSearch;
    // arr.forEach((item) => {
    //   obj[item] = 1;
    // });
    // this.zuijinarr = [...Object.keys(obj)];
    // 热门
    gethot().then((res) => {
      console.log(res);
      this.list = res.data.data;
    });
  },
};
</script>

<style scoped>
.small {
  /* width:; */
  padding: 4px;
  height: 1rem;
  text-align: center;
  line-height: 1.25rem;
  background-color: #f0f2f5;
  font-size: 0.75rem;
  margin-right: 1rem;
  margin-bottom: 0.625rem;
}
.hea {
  width: 100%;
  height: 2.5rem;
  padding-left: 0.75rem;
  /* margin-bottom: .625rem; */
}
.footer {
  display: flex;
  flex-wrap: wrap;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  /* background-color: white; */
}
</style>